<template>
  <div class='memberlist-container'>
    <el-row :gutter="5">
      <el-col :span="24"
              class="memberlist-top">
        <el-col :span="6">
          <el-button type="primary"
                     class="all-btn"
                     plain>全部已读</el-button>
        </el-col>
        <el-col :span="3">
          <el-select v-model="value"
                     placeholder="选择项目">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select v-model="value"
                     placeholder="楼号">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select v-model="value"
                     placeholder="楼层">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select v-model="value"
                     placeholder="构件类型">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select v-model="value"
                     placeholder="选择加工厂">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-input placeholder="输入构件编号"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button icon="el-icon-search"
                     type="primary">查询</el-button>
        </el-col>
      </el-col>
      <el-col :span="24"
              class="memberlist-select">
        <span class="checkbox-span">选择显示：</span>
        <el-checkbox :indeterminate="isIndeterminate"
                     class="checkbox-all"
                     v-model="checkAll"
                     @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group v-model="checkedCities"
                           class="checkbox-item"
                           @change="handleCheckedCitiesChange">
          <el-checkbox v-for="city in cities"
                       :label="city"
                       :key="city">{{city}}</el-checkbox>
        </el-checkbox-group>
      </el-col>
      <el-col :span="24">
        <el-table :highlight-current-row='true'
                  :data='memberTable.list'>
          <el-table-column prop='member_no'
                           label='构件编号'
                           sortable
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='id_chip'
                           label='ID芯片'
                           sortable
                           align='center'
                           v-if="checkedCities.indexOf('ID芯片')!=-1?true:false"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='sensor'
                           label='传感器'
                           sortable
                           align='center'
                           v-if="checkedCities.indexOf('传感器')!=-1?true:false"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='member_type'
                           label='构件类型'
                           sortable
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='state'
                           label='状态'
                           sortable
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='plant'
                           label='加工厂'
                           sortable
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='manager'
                           label='生产负责人'
                           sortable
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='pro_time'
                           label='生产时间'
                           sortable
                           align='center'
                           v-if="checkedCities.indexOf('生产时间')!=-1?true:false"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='storage_time'
                           label='入库时间'
                           sortable
                           align='center'
                           v-if="checkedCities.indexOf('入库时间')!=-1?true:false"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='trans_car'
                           label='运输车辆'
                           sortable
                           align='center'
                           v-if="checkedCities.indexOf('运输车辆')!=-1?true:false"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='turn_time'
                           label='到场时间'
                           sortable
                           align='center'
                           v-if="checkedCities.indexOf('到场时间')!=-1?true:false"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='hoist_time'
                           label='吊装时间'
                           sortable
                           align='center'
                           v-if="checkedCities.indexOf('吊装时间')!=-1?true:false"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='hoist_principal'
                           label='吊装负责人'
                           sortable
                           align='center'
                           v-if="checkedCities.indexOf('吊装负责人')!=-1?true:false"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='complete_time'
                           label='完成时间'
                           sortable
                           align='center'
                           v-if="checkedCities.indexOf('完成时间')!=-1?true:false"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='find_result'
                           label='检测结果'
                           sortable
                           align='center'
                           v-if="checkedCities.indexOf('检测结果')!=-1?true:false"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column label='操作'
                           align='center'
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button size="mini"
                         icon="el-icon-search"></el-button>
              <el-button type="info"
                         size="mini"
                         icon="el-icon-delete"
                         @click="onDeleteDialog"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @current-change='handlePageChange'
                       :current-page='requestParam.page'
                       :page-size='requestParam.page_size'
                       layout='total,sizes,prev, pager, next, jumper'
                       background
                       :total='memberTable.total_count'
                       align='center'>
        </el-pagination>
        <el-dialog title="信息"
                   :visible.sync="deleteDialogVisible"
                   width="30%">
          <span>确定要删除吗？</span>
          <span slot="footer"
                class="dialog-footer">
            <el-button type="primary"
                       @click="deleteDialogVisible = false">是</el-button>
            <el-button @click="deleteDialogVisible = false">否</el-button>
          </span>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>
<script>
const cityOptions = ['ID芯片', '传感器', '生产时间', '入库时间', '运输车辆', '到场时间', '吊装时间', '吊装负责人', '完成时间', '检测结果'];
export default {
  data () {
    return {
      value: "",
      options: [],
      deleteDialogVisible: false,
      requestParam: {
        page: 1,
        page_size: 10
      },
      memberTable: {
        list: [{ member_no: "1" }],
        total_page: 0,
        total_count: 0
      },
      checkAll: false,
      checkedCities: [],
      cities: cityOptions,
      isIndeterminate: true
    }
  },
  methods: {
    //删除事件
    onDeleteDialog () {
      // this.deleteDialogVisible = true
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除!'
        });
      });
    },
    handlePageChange (page) {

    },
    //复选框全选事件
    handleCheckAllChange (val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    //复选框选中事件
    handleCheckedCitiesChange (value) {
      this.checkedCities = value
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
  },
  created () {

  },
  mounted () {

  }
}
</script>
<style scoped lang='scss'>
.memberlist-container {
  .memberlist-top {
    background: #fff;
    margin-bottom: 20px;
    padding: 10px 0px;
    .all-btn {
      margin-left: 10px;
    }
  }

  .memberlist-select {
    padding: 15px 0px;
    background: #fff;
    overflow: hidden;
    border-bottom: 1px solid #ebeef5;
    /deep/ .el-checkbox {
      margin-right: 10px;
    }
    .checkbox-span {
      float: left;
      margin-left: 15px;
    }
    .checkbox-all {
      float: left;
    }
    .checkbox-item {
      float: left;
    }
  }
}
</style>
